<template>
  <h2>需求:当水温达到60度，或水位达到80cm时，给服务器发请求</h2>
  <h2>当前水温为：{{ num1 }}°C</h2>
  <h2>当前水位为：{{ num2 }}cm</h2>
  <button @click="changeNum1">水温+10</button>
  <button @click="changeNum2">水位+10</button>
  <hr />
</template>

<script setup>
import { ref, watchEffect } from 'vue'

// 监听ref基本数据类型
let num1 = ref(10)
let num2 = ref(0)
const changeNum1 = () => {
  num1.value += 10
}
const changeNum2 = () => {
  num2.value += 10
}

// watch([num1, num2], (newVal) => {
//   console.log('newVal', newVal)
//   let [valNum1, valNum2] = newVal
//   console.log(valNum1, valNum2)

//   if (valNum1 >= 60 || valNum2 >= 80) {
//     console.log('向服务器发请求')
//   }
// })
watchEffect(() => {
  console.log('开始就触发')
  // if (num1.value >= 60 || num2.value >= 70) {
  //   console.log('向服务器发请求')
  // }
  if (num1.value >= 60) {
    console.log('向服务器发请求')
  }
  if (num2.value >= 70) {
    console.log('向服务器发请求')
  }
})
</script>

<style lang="scss" scoped></style>
